<html lang="zh-cn">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }

        pre {
            outline: 0px solid #ccc;
            padding: 5px;
            margin: 5px;
        }

        .string {
            color: green;
        }

        .number {
            color: darkorange;
        }

        .boolean {
            color: blue;
        }

        .null {
            color: magenta;
        }

        .key {
            color: red;
        }
    </style>
    <script language="JavaScript">
        setTimeout(function () {
            location.reload()
        }, 1000000); //指定1秒刷新一次

        function fn() {
            var els = document.getElementsByClassName('json'); //获取json格式内容
            for (let index in els) {
                try {
                    jsonstr = els[index].innerHTML;
                    if (jsonstr.indexOf(':') != -1) {
                        json = eval('(' + jsonstr + ')');
                        els[index].innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>';
                    }
                } catch (e) {
                }
            }
        }

        function syntaxHighlight(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }
            json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }
    </script>
</head>
<body onload="fn()">
{% if token %}
    <p>
    <table class="gridtable">
        <thead>
        <tr>
            <th>admin</th>
            <th colspan="4">{{ token }}</th>
            <!--<th><a href="/login">登录</a></th>-->
        </tr>
        </thead>
    </table>
    </p>
{% endif %}

<!-- Table goes in the document BODY -->
<table class="gridtable">
    <thead>
    <tr>
        <!--<th>序号</th>-->
        {% for title in titles %}
            <th>{{ title }}</th>
        {% endfor %}
    </tr>
    </thead>
    <tbody>
    {% for data in datas %}
        <tr>
            <!--<td>{{ loop.index }}</td>-->
            {% for column in data %}
                <td>
                    <div class="json">{{ column }}</div>
                </td>
            {% endfor %}
        </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>